﻿<!DOCTYPE html>
<html lang="en" class="ace ace-card-on ace-tab-nav-on ace-main-nav-on ace-sidebar-on" data-theme-color="#c0e3e7">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Connection</title>
    <meta name="description" content="">

{#    <link rel="apple-touch-icon" href="apple-touch-icon.png">#}
{#    <link rel="shortcut icon" href="favicon.ico">#}

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

    <!-- Icon Fonts -->
    <link href="../../static/main_style/fonts/icomoon/style.css" rel="stylesheet">

    <!-- Styles -->
    <link href="../../static/main_style/js/plugins/highlight/solarized-light.css" rel="stylesheet">
    <link href="../../static/main_style/style.css" rel="stylesheet">

    <!-- Modernizer -->
    <script type="text/javascript" src="../../static/main_style/js/vendor/modernizr-3.3.1.min.js"></script>
    <!-- Echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <div class="ace-wrapper">
        <header id="ace-header" class="ace-container-shift ace-logo-in ace-head-boxed ace-nav-right">
            <div class="ace-head-inner">
                <div class="ace-head-container ace-container">
                    <div class="ace-head-row">
                        <div id="ace-head-col1" class="ace-head-col text-left">
                            <a id="ace-logo" class="ace-logo" href="index">
                                <span>Researcher</span>
                            </a>
                        </div>

                        <div id="ace-head-col2" class="ace-head-col text-right">
                            <div class="ace-nav-container ace-container hidden-sm hidden-xs">
                                <nav id="ace-main-nav">
                                    <ul class="clear-list">
                                        <li><a href="#">about</a></li>
                                        <li><a href={{ "../index" }}>hot</a></li>
                                        <li><a href={{ "../search" }}>search</a></li>
                                        <li><a href={{ "../favor"}}>favor</a></li>
                                        <li><a href={{ "../logout" }}>logout</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>

{#                        <div id="ace-head-col3" class="ace-head-col text-right">#}
{#                            <button id="ace-sidebar-btn" class="btn btn-icon btn-light btn-shade">#}
{#                                <span class="ace-icon ace-icon-side-bar-icon"></span>#}
{#                            </button>#}
{#                        </div>#}
                    </div>
                </div>
                <!-- .ace-container -->
            </div>
            <!-- .ace-head-inner -->
        </header>
        <!-- #ace-header -->


{#        <nav id="ace-nav-sm" class="ace-nav hidden-lg hidden-md">#}
{#            {% set url_name = Researcher_info.Name | replace (" ", "%20") %}#}
{#            <ul class="clear-list">#}
{#                <li>#}
{#                    <a href="#" data-tooltip="Home"><img class="avatar avatar-42" src="../../static/my_style/imgs/ha_glass.jpg"></a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href={{ "../professor/"  + url_name }} data-tooltip="Professor"><span class="ace-icon ace-icon-experience"></span></a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href={{ "../paper/"  + url_name }} data-tooltip="Paper"><span class="ace-icon ace-icon-portfolio"></span></a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href={{ "../connection/" + url_name }} data-tooltip="Connections"><span class="ace-icon ace-icon-references"></span></a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href="contact.html" data-tooltip="Contact"><span class="ace-icon ace-icon-contact"></span></a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href="category.html" data-tooltip="Blog"><span class="ace-icon ace-icon-blog"></span></a>#}
{#                </li>#}
{#            </ul>#}
{#        </nav>#}
        <!-- #ace-tab-nav-sm -->

        <article id="ace-card" class="ace-card bg-primary">
            <div class="ace-card-inner text-center">
                <img class="avatar avatar-195" src={{ Researcher_info.Avatar }} width="195" height="195" alt="">
                <h1>{{ Researcher_info.Name }}</h1>
                <p class="text-muted">{{ Researcher_info.Title }}</p>
{#                <a href={{ Researcher_info.HomePage }} target="_blank" style="font-size: 1em;">Homepage</a>#}
            </div>

            <footer class="ace-card-footer">
                <a class="btn btn-lg btn-block btn-thin btn-upper " href= {{ Researcher_info.HomePage }} >Homepage</a>
            </footer>
        </article>
        <!-- #ace-card -->

        <div id="ace-content" class="ace-container-shift">
            <div class="ace-container">

                <div id="ace-nav-wrap" class="hidden-sm hidden-xs">
                    <div class="ace-nav-cont">
                        <div id="ace-nav-scroll">
                            <nav id="ace-nav" class="ace-nav">
                                <ul class="clear-list">
                                    {% set url_name = Researcher_info.Name | replace (" ", "%20") %}
                                    <li>
                                        <a href="#" data-tooltip="Here"><img class="avatar avatar-42" src="../../static/my_style/imgs/ha_glass.jpg" alt=""></a>
                                    </li>
                                    <li>
                                        <a href={{ "../professor/" + url_name }} data-tooltip="Professor"><span
                                                class="ace-icon ace-icon-experience"></span></a>
                                    </li>
                                    <li>
                                        <a href={{ "../connection/"  + url_name }} data-tooltip="Connection"><span
                                                class="ace-icon ace-icon-portfolio"></span></a>
                                    </li>
                                    <li>
                                        <a href={{ "../paper/" + url_name }} data-tooltip="Paper"><span
                                                class="ace-icon ace-icon-references"></span></a>
                                    </li>
                                    <li>
                                        <a href="#" data-tooltip="Contact"><span
                                                class="ace-icon ace-icon-contact"></span></a>
                                    </li>
                                    <li>
                                        <a href="#" data-tooltip="Blog"><span
                                                class="ace-icon ace-icon-blog"></span></a>
                                    </li>
                                </ul>
                            </nav>
                        </div>

                        <div id="ace-nav-tools" class="hidden">
                            <span class="ace-icon ace-icon-dots-three-horizontal"></span>

                            <button id="ace-nav-arrow" class="clear-btn">
                                <span class="ace-icon ace-icon-chevron-thin-down"></span>
                            </button>
                        </div>
                    </div>
                    <div class="ace-nav-btm"></div>
                </div>
                <!-- .ace-nav-wrap -->

                <div class="ace-paper-stock">
                    <main class="ace-paper clearfix">
                        <div class="ace-paper-cont clear-mrg">

                            <!-- START: PAGE CONTENT -->
                            <div class="padd-box clear-mrg">
                                <section class="section brd-btm">
                                    <div class="row">
                                        <div class="col-sm-12 clear-mrg text-box">
                                            <h2 class="title-lg text-upper">Charts</h2>
                                        </div>
                                    </div>
                                </section>
                                <!-- .section -->

                                <section class="section brd-btm">
                                    <!-- NOTE Insert -->
                                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                    <div id="echart_citation" style="width: 750px;height:500px; text-align: center"></div>
                                    <!-- NOTE: 这些 hidden 是为了从 flask 获取数据, 然后防止在 js 中被转义为 HTML language 的无奈之举 -->
                                    <br>
                                    <br>
                                    <br>
                                    <div id="echart_coauthor" style="width: 800px;height:600px; text-align: center"></div>
                                    <div id="Name" style="display: none;">{{ Researcher_info.Name }}</div>
                                    <div id="xAxis" style="display: none;">{{ xAxis }}</div>
                                    <div id="series" style="display: none;">{{ data }}</div>
                                    <div id="AuthorNodes" style="display: none;">{{ AuthorNodes }}</div>
                                    <div id="Links" style="display: none;">{{ Links }}</div>

                                    <script type="text/javascript">
                                        // 基于准备好的dom，初始化echarts实例
                                        var myChart = echarts.init(document.getElementById('echart_citation'));
                                        var Name = document.getElementById('Name').innerText;
                                        var x_test = document.getElementById('xAxis').innerText;
                                        var y_test = document.getElementById('series').innerText;
                                        // 指定图表的配置项和数据
                                        var option = {
                                            color: ['#2f4554'],
                                            title: {
                                                text: Name
                                            },
                                            tooltip: {},
                                            legend: {
                                                data: ['Citations']
                                            },
                                            xAxis: {
                                                // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                                                data: eval(x_test)
                                            },
                                            yAxis: {},
                                            series: [{
                                                name: 'Citations',
                                                type: 'bar',
                                                data: eval(y_test)
                                            }]
                                        };

                                        // 使用刚指定的配置项和数据显示图表。
                                        myChart.setOption(option);
                                    </script>
                                    <script type="text/javascript">
                                        var myChart = echarts.init(document.getElementById('echart_coauthor'));
                                        // var AuthorNodes = echarts.init(document.getElementById('AuthorNodes'));
                                        var AuthorNodes = document.getElementById('AuthorNodes').innerText;
                                        console.log(AuthorNodes)
                                        var Links = document.getElementById('Links').innerText;
                                        console.log(Links)
                                        var categories = [{ name: 'author' }, { name: 'coauthor' }];
                                        option = {
                                            // 图的标题
                                            title: {
                                                text: 'Co-Authors'
                                            },
                                            // 提示框的配置
                                            tooltip: {
                                                formatter: function (x) {
                                                    return x.data.des;
                                                }
                                            },
                                            legend: [{
                                                // selectedMode: 'single',
                                                data: categories.map(function (a) {
                                                    return a.name;
                                                })
                                            }],
                                            series: [{
                                                type: 'graph', // 类型:关系图
                                                layout: 'force', //图的布局，类型为力导图
                                                symbolSize: 40, // 调整节点的大小
                                                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                                                edgeSymbol: ['circle', 'arrow'],
                                                edgeSymbolSize: [2, 10],
                                                edgeLabel: {
                                                    normal: {
                                                        textStyle: {
                                                            fontSize: 20
                                                        }
                                                    }
                                                },
                                                force: {
                                                    repulsion: 2500,
                                                    edgeLength: [10, 50]
                                                },
                                                draggable: true,
                                                lineStyle: {
                                                    normal: {
                                                        width: 2,
                                                        color: '#4b565b',
                                                    }
                                                },
                                                label: {
                                                    normal: {
                                                        show: true,
                                                        textStyle: {}
                                                    }
                                                },
                                                data: eval(AuthorNodes),
                                                links: eval(Links),
                                                categories: categories,
                                            }]
                                        };
                                        myChart.setOption(option);
                                    </script>

                                </section>
                                <!-- .section -->


                            </div>
                            <!-- .padd-box -->
                            <!-- END: PAGE CONTENT -->

                        </div>
                        <!-- .ace-paper-cont -->
                    </main>
                    <!-- .ace-paper -->
                </div>
                <!-- .ace-paper-stock -->

            </div>
            <!-- .ace-container -->
        </div>
        <!-- #ace-content -->

{#        <div id="ace-sidebar">#}
{#            <button id="ace-sidebar-close" class="btn btn-icon btn-light btn-shade">#}
{#                <span class="ace-icon ace-icon-close"></span>#}
{#            </button>#}
{##}
{#            <div id="ace-sidebar-inner">#}
{#                <nav id="ace-main-nav-sm" class="visible-xs visible-sm text-center">#}
{#                    <ul class="clear-list">#}
{#                        <li><a href="index.html">about</a></li>#}
{#                        <li><a href="portfolio.html">portfolio</a>#}
{#                        <li><a href="testimonials.html">references</a></li>#}
{#                        <li class="has-sub-menu"><a href="#">pages</a>#}
{#                            <ul class="sub-menu">#}
{#                                <li><a href="typography.html">typography</a></li>#}
{#                                <li><a href="components.html">components</a></li>#}
{#                                <li><a href="search.html">search</a></li>#}
{#                                <li><a href="404.html">404</a></li>#}
{#                            </ul>#}
{#                        </li>#}
{#                        <li class="has-sub-menu"><a href="category.html">blog</a>#}
{#                            <ul class="sub-menu">#}
{#                                <li><a href="single.html">single</a></li>#}
{#                                <li><a href="single-image.html">single image</a></li>#}
{#                                <li><a href="single-slider.html">single slider</a></li>#}
{#                                <li><a href="single-youtube.html">single youtube</a></li>#}
{#                                <li><a href="single-vimeo.html">single vimeo</a></li>#}
{#                                <li><a href="single-dailymotion.html">single dailymotion</a></li>#}
{#                                <li><a href="single-soundcloud.html">single soundcloud</a></li>#}
{#                                <li><a href="single-video.html">single video</a></li>#}
{#                                <li><a href="single-audio.html">single audio</a></li>#}
{#                            </ul>#}
{#                        </li>#}
{#                        <li><a href="contact.html">contact</a></li>#}
{#                    </ul>#}
{#                </nav>#}
{#                <!-- #ace-main-nav-sm -->#}
{##}
{#                <article class="ace-card bg-primary">#}
{#                    <div class="ace-card-inner text-center">#}
{#                        <img class="avatar avatar-195" src={{ Researcher_info.Avatar }} width="195" height="195" alt="">#}
{#                        <h1>{{ Researcher_info.Name }}</h1>#}
{#                        <p class="text-muted"> {{ Researcher_info.Title }} </p>#}
{#                        <a href={{ Researcher_info.HomePage }} target="_blank" style="font-size: 1em;">Homepage</a>#}
{#                    </div>#}
{#                </article>#}
{#                <!-- #ace-card -->#}
{##}
{#                <aside class="widget-area">#}
{#                    <section class="widget widget_search">#}
{#                        <form role="search" method="post" class="search-form">#}
{#                            <label>#}
{#                                <span class="screen-reader-text">Search for:</span>#}
{#                                {{ form.SideSearch }}#}
{#                            </label>#}
{#                            {{form.csrf_token}}#}
{#                            <!-- {{ form.submit }} -->#}
{#                            <button type="submit" class="search-submit" id="SideSubmit">#}
{#                                <span class="screen-reader-text">Search</span>#}
{#                                <span class="ace-icon ace-icon-search"></span>#}
{#                            </button>#}
{#                        </form>#}
{#                    </section>#}
{##}
{#                    <section class="widget widget_posts_entries">#}
{#                        <h2 class="widget-title">Recommends For You</h2>#}
{#                        <ul>#}
{#                            <li>#}
{#                                <a class="post-image" href="">#}
{#                                    <img src="http://noemi.px-lab.com/wp-content/uploads/2016/05/tttt-70x70.png" alt="">#}
{#                                </a>#}
{#                                <div class="post-content">#}
{#                                    <h3>#}
{#                                        <a href="">contextual advertising</a>#}
{#                                    </h3>#}
{#                                </div>#}
{#                                <div class="post-category-comment">#}
{#                                    <a href="" class="post-category">Work</a>#}
{#                                    <a href="" class="post-comments">256 comments</a>#}
{#                                </div>#}
{#                            </li>#}
{##}
{#                            <li>#}
{#                                <a class="post-image" href="">#}
{#                                    <img src="http://noemi.px-lab.com/wp-content/uploads/2016/05/IMG_8945-1-70x70.jpg"#}
{#                                        alt="">#}
{#                                </a>#}
{#                                <div class="post-content">#}
{#                                    <h3>#}
{#                                        <a href="">grilling tips for the dog days of summer</a>#}
{#                                    </h3>#}
{#                                </div>#}
{#                                <div class="post-category-comment">#}
{#                                    <a href="" class="post-category">Work</a>#}
{#                                    <a href="" class="post-comments">256 comments</a>#}
{#                                </div>#}
{#                            </li>#}
{##}
{#                            <li>#}
{#                                <a class="post-image" href="">#}
{#                                    <img src="http://noemi.px-lab.com/wp-content/uploads/2016/05/15-70x70.png" alt="">#}
{#                                </a>#}
{#                                <div class="post-content">#}
{#                                    <h3>#}
{#                                        <a href=""></a>branding do you know who are#}
{#                                    </h3>#}
{#                                </div>#}
{#                                <div class="post-category-comment">#}
{#                                    <a href="" class="post-category">Work</a>#}
{#                                    <a href="" class="post-comments">256 comments</a>#}
{#                                </div>#}
{#                            </li>#}
{#                        </ul>#}
{#                    </section>#}
{##}
{#                    <section id="tag_cloud-2" class="widget widget_tag_cloud">#}
{#                        <h2 class="widget-title">Tags</h2>#}
{#                        <div class="tagcloud">#}
{#                            <a href="http://sc.chinaz.com/jiaoben/tag/audios/" class="tag-link-5 tag-link-position-1"#}
{#                                title="1 topic" style="font-size: 1em;">Audios</a>#}
{#                            <a href="" class="tag-link-7 tag-link-position-2" title="1 topic"#}
{#                                style="font-size: 1em;">Freelance</a>#}
{#                        </div>#}
{#                    </section>#}
{##}
{#                    <section id="recent-posts-3" class="widget widget_recent_entries">#}
{#                        <h4 class="widget-title">Recent Posts</h4>#}
{#                        <ul>#}
{#                            <li>#}
{#                                <a href="">Global Travel And Vacations Luxury Travel On A Tight Budget</a>#}
{#                                <div class="post-category-comment">#}
{#                                    <a href="" class="post-category">Photography</a>#}
{#                                    <a href="" class="post-comments">256 comments</a>#}
{#                                </div>#}
{#                            </li>#}
{#                            <li>#}
{#                                <a href="">cooking for one</a>#}
{#                                <div class="post-category-comment">#}
{#                                    <a href="" class="post-category">Work</a>#}
{#                                    <a href="" class="post-comments">256 comments</a>#}
{#                                </div>#}
{#                            </li>#}
{#                            <li>#}
{#                                <a href="">An Ugly Myspace Profile Will Sure Ruin Your Reputation</a>#}
{#                                <div class="post-category-comment">#}
{#                                    <a href="" class="post-category">Photography</a>#}
{#                                    <a href="" class="post-comments">256 comments</a>#}
{#                                </div>#}
{#                            </li>#}
{#                        </ul>#}
{#                    </section>#}
{##}
{#                    <section class="widget widget_categories">#}
{#                        <h4 class="widget-title">post categories</h4>#}
{#                        <ul>#}
{#                            <li class="cat-item"><a href="">Audios</a>5</li>#}
{#                            <li class="cat-item"><a href="">Daili Inspiration</a>2</li>#}
{#                            <li class="cat-item"><a href="">Freelance</a>27</li>#}
{#                            <li class="cat-item"><a href="">Links</a>5</li>#}
{#                            <li class="cat-item"><a href="">Mobile</a>2</li>#}
{#                            <li class="cat-item"><a href="">Phography</a>27</li>#}
{#                        </ul>#}
{#                    </section>#}
{#                </aside>#}
{##}
{#            </div>#}
{#            <!-- #ace-sidebar-inner -->#}
{#        </div>#}
{#        <!-- #ace-sidebar -->#}

        <footer id="ace-footer" class="ace-container-shift">
            <div class="ace-container">
                <div class="ace-footer-cont clear-mrg">
                    <p class="text-center">@ EE447 Mobile Network Final Project @</p>
                </div>
            </div>
            <!-- .ace-container -->
        </footer>
        <!-- #ace-footer -->

        <!-- Triangle Shapes -->
        <svg id="ace-bg-shape-1" class="hidden-sm hidden-xs" height="519" width="758">
            <polygon points="0,455,693,352,173,0,92,0,0,71"
                style="fill:#d2d2d2;stroke:purple;stroke-width:0; opacity: 0.5"></polygon>
        </svg>

        <svg id="ace-bg-shape-2" class="hidden-sm hidden-xs" height="536" width="633">
            <polygon points="0,0,633,0,633,536" style="fill:#c0e3e7;stroke:purple;stroke-width:0"></polygon>
        </svg>

    </div>
    <!-- .ace-wrapper -->

    <!-- Scripts -->
    <script type="text/javascript" src="../../static/main_style/js/vendor/jquery-1.12.4.min.js"></script>


    <!---<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyDiwY_5J2Bkv2UgSeJa4NOKl6WUezSS9XA"></script>--->
    <script type="text/javascript" src="../../static/main_style/js/plugins/highlight/highlight.pack.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/plugins/jquery.mCustomScrollbar.min.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/plugins/isotope.pkgd.min.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/plugins/progressbar.min.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/plugins/slick.min.js"></script>

    <script type="text/javascript" src="../../static/main_style/js/options.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/main.js"></script>
</body>

</html>